<template>
  <div class="home_menu">
    <el-menu
      :default-active="menuActive"
      background-color="#180300"
      text-color="#fff"
      active-text-color="#ffd04b"
      class="home_menu_box"
      :unique-opened="uniqueOpened"
      router
    >
      <el-submenu index="2">
        <span slot="title">用户管理</span>
        <el-menu-item index="/user/individualUser"> 个人用户 </el-menu-item>
        <el-menu-item index="/user/organizationUser"> 机构用户 </el-menu-item>
      </el-submenu>

      <el-submenu index="3">
        <span slot="title"> 考试管理</span>
        <el-menu-item index="/exam/levelManager"> 等级管理</el-menu-item>
        <el-menu-item index="/exam/areaManager"> 考点管理</el-menu-item>
        <el-menu-item index="/exam/examManager"> 科目管理</el-menu-item>
      </el-submenu>

      <el-submenu index="4">
        <span slot="title"> 订单管理</span>
        <el-menu-item index="/order/individualOrder"> 个人订单</el-menu-item>
        <el-menu-item index="/order/organizationOrder"> 机构订单</el-menu-item>
      </el-submenu>

      <el-menu-item index="/examinee/examineeList">
        <span slot="title">考生管理</span>
      </el-menu-item>

      <el-menu-item index="/results/resultsList">
        <span slot="title">成绩管理</span>
      </el-menu-item>

      <el-submenu index="6">
        <span slot="title">账户管理</span>
        <!-- <el-menu-item index="/user/userEdit"> 账号信息 </el-menu-item> -->
        <el-menu-item index="/account/incomeManager"> 个人账单 </el-menu-item>
        <el-menu-item index="/account/transactionManager">
          机构账单
        </el-menu-item>
        <el-menu-item index="/account/refundManager"> 退款申请 </el-menu-item>
      </el-submenu>

      <el-menu-item @click="logoutBtn()">
        <span slot="title">退出系统</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "HomeMenu",
  props: {},
  data() {
    return {
      userName: this.$store.state.loginUserName,
      menuActive: "", // 导航默认选中
      uniqueOpened: true,
    };
  },
  created: function () {
    this.setMenuActive();
  },
  methods: {
    // 设置选择
    setMenuActive: function () {
      let path = this.$route.path;
      if (path.indexOf("/exam/levelManager") == 0) {
        this.menuActive = "/exam/levelManager";
      } else if (path.indexOf("/exam/examManager") == 0) {
        this.menuActive = "/exam/examManager";
      } else if (path.indexOf("/examinee") == 0) {
        this.menuActive = "/examinee/examineeList";
      } else {
        this.menuActive = path;
      }
    },
    // 退出登录
    logoutBtn: function () {
      let that = this;
      this.$confirm("确认退出?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          that.$store.commit("set_loginToken", "");
          that.$store.commit("set_loginUserId", "");
          that.$store.commit("set_loginUserName", "");
          that.$router.push({
            name: "Login",
          });
        })
        .catch(() => {});
    },
  },
  watch: {
    // 监听路有变化
    $route: "setMenuActive",
  },
};
</script>
